<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge, chrome=1" />
    <title>Document</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
      }
      .result,
      .input {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
      }
      .result {
        /* margin-bottom: 40px; */
        margin: 40px 0;
      }
      .input {
        /* position: absolute;
        left: 0;
        bottom: 100px; */
      }
      .result .item,
      .input .item {
        /* width: calc(10%-10px); */
        height: 60px;
        line-height: 60px;
        text-align: center;
        flex: 0 0 calc(25% - 4px);
        box-sizing: border-box;
        margin: 2px;
      }
      .input .item,
      .result .item .body {
        font-size: 20px;
        color: #fff;
        font-weight: bold;
      }
      .input .item {
        border-radius: 10%;
        background-color: rgb(255, 60, 0);
      }
      .result .item .body {
        border-radius: 20%;
        background-color: rgb(0, 120, 255);
        font-weight: bold;
      }
      .result .item {
        display: flex;
        position: relative;
      }
      .result .item .body,
      .result .item .count {
        flex: 0 0 50%;
      }
      .result .item .count {
        border-bottom: 1px solid #000;
        font-size: 24px;
      }
      .info {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
        margin-top: 10px;
      }
      .reset,
      .ing {
        margin-left: 10px;
      }
      .reset {
        width: 80px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 24px;
        color: #fff;
        background-color: rgb(255, 120, 0);
        /* float: right;  */
      }
      .ing {
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <div class="info">
      <div class="ing">已选<span class="number">0</span>注</div>
      <div class="reset">清空</div>
    </div>
    <div class="result"></div>
    <div class="input"></div>
    <!-- Result input -->
    <!-- <div class="result">
      <div class="item">
        <div class="body">1</div>
        <div class="count">0</div>
      </div>
      <div class="item">
        <div class="body">2</div>
        <div class="count">0</div>
      </div>
      <div class="item">
        <div class="body">3</div>
        <div class="count">0</div>
      </div>
      <div class="item">
        <div class="body">4</div>
        <div class="count">0</div>
      </div>
      <div class="item">
        <div class="body">5</div>
        <div class="count">0</div>
      </div>
      <div class="item">
        <div class="body">6</div>
        <div class="count">0</div>
      </div>
      <div class="item">
        <div class="body">7</div>
        <div class="count">0</div>
      </div>
      <div class="item">
        <div class="body">8</div>
        <div class="count">0</div>
      </div>
      <div class="item">
        <div class="body">9</div>
        <div class="count">0</div>
      </div>
      <div class="item">
        <div class="body">10</div>
        <div class="count">0</div>
      </div>
      <div class="item">
        <div class="body">11</div>
        <div class="count">0</div>
      </div>
      <div class="item">
        <div class="body">12</div>
        <div class="count">0</div>
      </div>
      <div class="item">
        <div class="body">13</div>
        <div class="count">0</div>
      </div>
      <div class="item">
        <div class="body">14</div>
        <div class="count">0</div>
      </div>
      <div class="item">
        <div class="body">15</div>
        <div class="count">0</div>
      </div>
      <div class="item">
        <div class="body">16</div>
        <div class="count">0</div>
      </div>
    </div>
    <div class="input">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
      <div class="item">10</div>
      <div class="item">11</div>
      <div class="item">12</div>
      <div class="item">13</div>
      <div class="item">14</div>
      <div class="item">15</div>
      <div class="item">16</div>
    </div> -->
    <script src="./index.js"></script>
    <script>
      function createDiv(options) {
        var value = options.value,
          name = options.name;
        var div = document.createElement('div');
        if (name) div.className = name;
        if (typeof value !== 'undefined') div.textContent = value;
        return div;
      }
      function updateNumber(isAdd) {
        var number = $('number');
        if (typeof isAdd === 'boolean')
          number.textContent = Number(number.textContent) + (isAdd ? 1 : -1);
        else number.textContent = 0;
      }
      function initResult() {
        var result = $('result');
        result.innerHTML = '';
        foreach(16, function (i) {
          var value = i + 1;
          var item = createDiv({ name: 'item' });

          var body = createDiv({ value, name: 'body' });

          var count = createDiv({ value: 0, name: 'count' });
          count.addEventListener('click', function () {
            var value = Number(this.textContent);
            if (value) {
              this.textContent = value - 1;
              updateNumber(false);
            }
          });
          item.append(body, count);
          result.appendChild(item);
        });
      }
      function initInput() {
        var input = $('input');
        input.innerHTML = '';
        foreach(16, function (i) {
          var value = i + 1;
          var item = createDiv({ value, name: 'item' });

          item.addEventListener('click', function (e) {
            console.log(value);
            var result = $('result');
            if (result) {
              var count = result.children.item(i).children.item(1);
              count.textContent = Number(count.textContent) + 1;
              updateNumber(true);
            }
          });
          input.appendChild(item);
        });
      }
      initResult();
      initInput();
      $('reset').addEventListener('click', function () {
        initResult();
        updateNumber();
      });
    </script>
  </body>
</html>
